<template>
  <basePopup :isVisible="modal.isShowModal">
    <view class="redo-container">
      <text class="redo-desc">{{ modal.title }}</text>
      <view class="redo-operate">
        <button class="operate gray" @click="handleCancel">{{ modal.cancelBtnText }}</button>
        <button class="operate prime" @click="handleConfirm">{{ modal.confirmBtnText }}</button>
      </view>
    </view>
  </basePopup>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useStore } from "vuex";
import basePopup from "@/components/basePopup.vue";

const store = useStore();

const modal = computed(() => {
  return store.state.modalParams;
});

const emits = defineEmits<{
  (e: "cancel"): void;
  (e: "confirm"): void;
}>();


const handleCancel = () => {
  emits("cancel");
  store.dispatch("setModalIsShow", {
    isShowModal: false,
  })
};

const handleConfirm = () => {
  emits("confirm");
  store.dispatch("setModalIsShow", {
    isShowModal: false,
  })
};
</script>

<style scoped lang="scss">
.redo-container {
  width: 30.5rem;
  height: 20.4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/redo-block.png");

  .redo-desc {
    display: block;
    padding: 4.5rem 4rem 3.6rem;
    text-align: center;
    font-size: 1.7rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .redo-operate {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .operate {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12rem;
      height: 5rem;
      margin: 0;
      font-family: xiaolai;
      font-size: 1.7rem;
      border-radius: 1rem;
      color: $uni-text-color;
      border: 2px solid $uni-btn-border;
    }

    .is-hover {
      color: rgba(255, 255, 255, 0.6);
    }

    .gray {
      background-color: $uni-btn-gray;
    }

    .prime {
      background-color: $uni-btn-prime;
    }
  }
}
</style>
